<template>
    <view class="commonList ovfxh">
        <u-sticky :enable="isShowSearch">
            <view class="searchInputStyle">
                <u-search v-model="filterData._Code" placeholder="钢丝绳编码" :clearabled="true" :show-action="false" shape="square" @search="searchData" @clear="searchData"></u-search>
                <u-icon labelPos="bottom" @click="codeSearch(2)" class="codeIcon" name="scan" color="#BFBFBF" size="48"></u-icon>
            </view>
        </u-sticky>
        <view style="text-align: center">
            <u--image class="lightImg" :showLoading="true" src="/static/imgs/greenLight.png" width="40rpx" height="40rpx"></u--image>
            <span class="marr-20">轻度</span>
            <u--image class="lightImg" :showLoading="true" src="/static/imgs/blueLight.png" width="40rpx" height="40rpx"></u--image>
            <span class="marr-20">中度</span>
            <u--image class="lightImg" :showLoading="true" src="/static/imgs/yellowLight.png" width="40rpx" height="40rpx"></u--image>
            <span class="marr-20">重度</span>
            <u--image class="lightImg" :showLoading="true" src="/static/imgs/orangeLight.png" width="40rpx" height="40rpx"></u--image>
            <span class="marr-20">严重</span>
            <u--image class="lightImg" :showLoading="true" src="/static/imgs/grayLight.png" width="40rpx" height="40rpx"></u--image>
            <span class="marr-20">报废</span>
        </view>
        <view class="cons-ul">
            <touchView ref="touchViews" v-for="item in list" :key="item.autoID" @clearTouch="clearTouch">
                <view class="cons-li posr">
                    <view class="title topTitle">
                        <u-image class="dahuiIcon" v-if="item.reportModel && item.reportModel.status == 1" width="45rpx" mode="widthFix" src="/static/img/dahui.png"></u-image>
                        <text class="label-name">钢丝绳编码：{{ item.code || "-" }}</text>
                        <u--image class="lightImg" :showLoading="true" :src="getLight(item.checkWireropeStatusMonitorModel, 'summary')" width="40rpx" height="40rpx"></u--image>
                    </view>
                    <u-line class="marb-20" color="#E5E5E5"></u-line>

                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="7" class="uni-commit">
                            <text class="label-name">钢丝绳名称：</text>
                            <text>{{ item.name || "-" }}</text>
                        </u-col>
                        <u-col span="5" class="uni-commit">
                            <text class="label-name lightName">LA状态：</text>
                            <u--image class="lightImg" :showLoading="true" :src="getLight(item.checkWireropeStatusMonitorModel, 'la')" width="40rpx" height="40rpx"></u--image>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="7" class="uni-commit">
                            <text class="label-name">规格型号：</text>
                            <text>{{ item.guiGe || "" }}</text>
                        </u-col>
                        <u-col span="5" class="uni-commit">
                            <text class="label-name lightName">DIA状态：</text>
                            <u--image class="lightImg" :showLoading="true" :src="getLight(item.checkWireropeStatusMonitorModel, 'dia')" width="40rpx" height="40rpx"></u--image>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="mart-20 marb-20">
                        <u-col span="7" class="uni-commit">
                            <text class="label-name">直径：</text>
                            <text>{{ item.diameter || "" }}</text>
                        </u-col>
                        <u-col span="5" class="uni-commit">
                            <text class="label-name lightName">LMA状态：</text>
                            <u--image class="lightImg" :showLoading="true" :src="getLight(item.checkWireropeStatusMonitorModel, 'lma')" width="40rpx" height="40rpx"></u--image>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="marb-30">
                        <u-col span="7" class="uni-commit">
                            <text class="label-name">安全运行时长：</text>
                            <text>{{ computedDay(item.installDate) }}天</text>
                        </u-col>
                        <u-col span="5" class="uni-commit">
                            <text class="label-name lightName">LL状态：</text>
                            <u--image class="lightImg" :showLoading="true" :src="getLight(item.checkWireropeStatusMonitorModel, 'nianJu')" width="40rpx" height="40rpx"></u--image>
                        </u-col>
                    </u-row>

                    <u-row gutter="0" class="btnBox mart-20 marb-10">
                        <template>
                            <u-col span="3" v-if="item.hasCheck">
                                <u-button type="primary" size="small" @click="showDetailDialog(item, '详情')">详情</u-button>
                            </u-col>
                            <u-col span="3" v-if="item.hasCheck">
                                <u-button type="warning" size="small" @click="showDetailDialog(item, '历史曲线')">历史曲线 </u-button>
                            </u-col>
                        </template>
                    </u-row>
                </view>
            </touchView>
        </view>

        <searchPopup ref="searchPopup" @AdvanceSearch="searchData" @ClearSearch="clearSearch">
            <u--form :model="filterData" ref="searchForm" label-position="top" :labelWidth="120">
                <u-form-item label="钢丝绳名称">
                    <u--input v-model="filterData._Name" placeholder="请输入钢丝绳名称" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item label="规格型号">
                    <u--input v-model="filterData._GuiGe" placeholder="请输入规格型号" prefixIconStyle="font-size: 22px;color: #909399"></u--input>
                </u-form-item>
                <u-form-item label="提升机类型">
                    <ld-select class="ldSel w-100" :multiple="true" label-key="name" value-key="autoID" table="Hoister" action="GetSearch" :filter="{ _Type: 2 }" label="name" value="autoID" placeholder="请选择提升机类型" clearable v-model="filterData._HoisterIDs" @change="hoisterChange"></ld-select>
                </u-form-item>

                <u-form-item label="矿山">
                    <ld-select class="ldSel w-100" :multiple="true" label-key="name" value-key="autoID" table="Department" action="GetSearchWithIsDelete" :filter="{ _Type: $enums.Department_Type.矿山 }" label="name" value="autoID" placeholder="请选择矿山" clearable v-model="filterData._DepartmentIDs" @change="statusChange"></ld-select>
                </u-form-item>

                <u-form-item label="LA状态">
                    <ld-select
                        class="ldSel w-100"
                        :multiple="true"
                        label-key="text"
                        value-key="value"
                        :inList="$enums.Light_Type.ToArray()"
                        :isLoadingData="false"
                        label="name"
                        value="autoID"
                        placeholder="请选择LA状态"
                        clearable
                        v-model="filterData._La"
                        @change="
                            (val) => {
                                ldSelectChange(val, '_La');
                            }
                        "></ld-select>
                </u-form-item>

                <u-form-item label="DIA状态">
                    <ld-select
                        class="ldSel w-100"
                        :multiple="true"
                        label-key="text"
                        value-key="value"
                        :inList="$enums.Light_Type.ToArray()"
                        :isLoadingData="false"
                        label="text"
                        value="value"
                        placeholder="请选择DIA状态"
                        clearable
                        v-model="filterData._Dia"
                        @change="
                            (val) => {
                                ldSelectChange(val, '_Dia');
                            }
                        "></ld-select>
                </u-form-item>

                <u-form-item label="LMA状态">
                    <ld-select
                        class="ldSel w-100"
                        :multiple="true"
                        label-key="text"
                        value-key="value"
                        :inList="$enums.Light_Type.ToArray()"
                        :isLoadingData="false"
                        label="text"
                        value="value"
                        placeholder="请选择LMA状态"
                        clearable
                        v-model="filterData._Lma"
                        @change="
                            (val) => {
                                ldSelectChange(val, '_Lma');
                            }
                        "></ld-select>
                </u-form-item>

                <u-form-item label="LL状态">
                    <ld-select
                        class="ldSel w-100"
                        :multiple="true"
                        label-key="text"
                        value-key="value"
                        :inList="$enums.Light_Type.ToArray()"
                        :isLoadingData="false"
                        label="text"
                        value="value"
                        placeholder="请选择LL状态"
                        clearable
                        v-model="filterData._NianJu"
                        @change="
                            (val) => {
                                ldSelectChange(val, '_NianJu');
                            }
                        "></ld-select>
                </u-form-item>

                <u-form-item label="综合状态">
                    <ld-select
                        class="ldSel w-100"
                        :multiple="true"
                        label-key="text"
                        value-key="value"
                        :inList="$enums.Light_Type.ToArray()"
                        :isLoadingData="false"
                        label="text"
                        value="value"
                        placeholder="请选择综合状态"
                        clearable
                        v-model="filterData._ZongHe"
                        @change="
                            (val) => {
                                ldSelectChange(val, '_ZongHe');
                            }
                        "></ld-select>
                </u-form-item>
            </u--form>
        </searchPopup>

        <view class="hei-30"></view>
    </view>
</template>

<script>
import ldSelect from "@/components/ld-select/ld-select.vue";
export default {
    components: {
        ldSelect,
    },
    data() {
        return {
            //查询分页所需要的数据
            pageIndex: 1,
            pageSize: 10,
            totalCount: 0,
            orderBy: "[x].[usingWireropeID] desc",

            //搜索条件对象
            filterData: {
                // _SearchInput: "",
                // _CompleteDate_Begin: "",
                // _CompleteDate_End: "",
                // _Statuss: [1, 2, 3],
                // _MaterialTransCode: "",
                // _LiaoKuangCode: ""
                _DepartmentIDs: [],
                _HoisterIDs: [],
            },
            list: [], //列表数据

            hasMore: true, //是否可以加载更多
            isShowSearch: true, //是否显示顶部搜索框，这里不是为了控制显示不显示，而是要处理在离开本页时把这个隐藏，否则会报错

            calendarShow: false,
            CompleteDate: "",
            baoGongPer: [],

            AssignStatusList: [],
            imgUrl: "/static/imgs/",
        };
    },
    //生命周期-加载
    onLoad: function (option) {
        let that = this;
        // #ifdef APP-NVUE
        const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
        // #endif

        // #ifndef APP-NVUE
        const eventChannel = this.getOpenerEventChannel();
        // #endif
        eventChannel.on("reportInit", function (data) {
            that.filterData._SearchInput = data.code;
        });
        eventChannel.on("liaoKuangSave", function (data) {
            that.filterData = data.data;
            setTimeout(() => {
                that.GetPage(true);
            }, 2000);
        });
    },
    //生命周期-显示
    onReady() {
        this.isShowSearch = true;
        // this.initSelect();
        this.GetPage();
        // this.baoGongPer = this.$gx.permissionRole(20000)[1].children;
        // this.AssignStatusList = (this.$enums.Assign_Status1.ToArray()).filter((item) => {
        // 	return item.value != 0
        // })
    },

    //生命周期-隐藏
    onHide() {
        this.isShowSearch = false;
    },

    onShow() {
        uni.$off("handClickReport");
        uni.$on("handClickReport", (res) => {
            this.RefreshData();
        });
    },

    //生命周期-下拉刷新
    onPullDownRefresh() {
        this.RefreshData();
    },

    //生命周期-上拉加载更多
    onReachBottom() {
        if (this.hasMore) {
            this.pageIndex++;
            this.GetPage();
        }
    },

    onNavigationBarButtonTap(e) {
        if (e.text == "筛选") {
            this.show = false;
            this.$nextTick(() => {
                this.$refs.searchPopup.init();
            });
        }
    },

    methods: {
        computedDay(startDate) {
            let dayNum = this.$gx.DateDiff("date", startDate, this.$gx.GetDateTime());
            return dayNum;
        },
        getLight(data, colName) {
            let imgUrl = this.imgUrl;
            if (!data) return (imgUrl += "grayLight.png");
            let value = data[colName] || 5;
            imgUrl += this.$enums.Light_Type.Get(value)["color"] + ".png";
            return imgUrl;
        },
        hideKeyboard() {
            uni.hideKeyboard();
        },
        statusChange(val) {
            this.$set(this.filterData, "_DepartmentIDs", val);
        },
        hoisterChange(val) {
            this.$set(this.filterData, "_HoisterIDs", val);
        },
        ldSelectChange(val, objName) {
            this.$set(this.filterData, objName, val);
        },
        //扫码
        codeSearch() {
            uni.scanCode({
                onlyFromCamera: true,
                scanType: ["qrCode"],
                success: (res) => {
                    if (!this.$gx.IsEmpty(res.result)) {
                        let code = res.result;
                        this.filterData._Code = code;
                        this.searchData();
                    } else {
                        this.$app.Tips({
                            title: "扫码信息格式不正确！",
                        });
                    }
                },
                fail: () => {
                    // this.$app.Tips({ title: "扫码失败，请联系管理员！" });
                },
                complete: () => {},
            });
        },
        // 回退所有的touchView
        clearTouch() {
            this.$refs.touchViews.forEach((element) => {
                element.hide();
            });
        },
        //分页
        GetPage(clearFlag) {
            const own = this;
            this.$app.ShowLoading();
            if (clearFlag) this.list = [];
            this.$app.CallApi(this.$app.api.UsingWirerope.GetStatusMonitorPage(this.pageIndex, this.pageSize, this.orderBy), {
                data: this.filterData,
                success: (res) => {
                    this.totalCount = res.totalCount;
                    this.list = this.list.concat(res.items);
                    this.$app.HideLoading();
                    if (this.totalCount <= this.list.length) {
                        this.hasMore = false;
                    }
                },
            });
        },

        searchData() {
            this.RefreshData();
        },

        //搜索
        RefreshData() {
            this.pageIndex = 1;
            this.list = [];
            this.hasMore = true;
            this.GetPage();
        },

        showDetailDialog(row, operateType) {
            let url = "/pages/stateMonitoring/detail";
            if (operateType == "历史曲线") {
                url = "/pages/stateMonitoring/history";
            }
            uni.navigateTo({
                url: url,
                success: function (res) {
                    res.eventChannel.emit("stateDetail", {
                        data: row,
                    });
                },
            });
        },

        clearSearch() {
            this.filterData._Code = "";
            this.filterData._Name = "";
            this.filterData._GuiGe = "";
            this.filterData._La = [];
            this.filterData._Dia = [];
            this.filterData._Lma = [];
            this.filterData._NianJu = [];
            this.filterData._ZongHe = [];
            this.filterData._DepartmentIDs = [];
            this.filterData._HoisterIDs = [];
            this.searchData();
        },
    },
};
</script>

<style scoped>
.commonList .cons-li {
    background-color: white;
}

.noPadding {
    padding: 0px !important;
}

.btnBox {
    justify-content: center !important;
    margin-left: -20rpx;
    margin-right: -20rpx;
}

.btnBox ::v-deep .u-col {
    min-width: 130rpx;
    margin-left: 20rpx;
    margin-right: 20rpx;
}

.searchInputStyle {
    display: flex;
    align-items: center;
}

.topTitle {
    display: flex;
}

.topTitle .label-name {
    flex: 2;
}

.lightName {
    text-align: right;
    width: 185rpx;
    display: inline-block;
}

.lightImg {
    display: inline-block;
    vertical-align: middle;
}
</style>
